<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/*结合实际html结构--通配【合理】*/
			*{
				font:16px "微软雅黑";
				/*去掉内外边距*/
				margin: 0;
				padding: 0;
				/*无序列表：有样式---去一个样式：列表项*/
				list-style-type: none;
				/*无序列表：有样式---【理解：简写】
				去全部样式：list-style-tyle     去列表项样式
				           list-style-position 去列表项标记位置样式
						   list-style-image    去列表项图片标记样式
						   
						   */
				list-style: none;
			}
			/** 左栏效果
			 * 1.左栏空间区域  235*460 背景颜色
			 * 2.左栏区域内容【li】  加权235*50 相对定位--挂靠点【固定位置】
			 * 3.给每个区域内容【li】加鼠标移动上去改背景颜色
			 * 4.左栏弹出框：400*450 1像素边框 绝对定位-钩子 微调
			 */
			aside{
				width:235px;
				height:450px;
				background: #ababab;
				margin: 20px 50px;
			}
			aside ul.sidebar li{
				width:235px;
				height: 50px;
				/*相对定位--挂靠点*/
				position: relative;
				text-align: center;
				line-height: 50px;
			}
			aside ul.sidebar li:hover{
				background: #eee;
				display: block;
			}
			aside ul.sidebar div.out{
				width: 400px;
				height: 450px;
				border: 1px solid red;
				position: absolute;
				left: 285px;
				/*显示与隐藏 JavaScript【JQuery框架】*/
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- html结构 结构化标记【语义化标签】 
		aside元素 针对：左栏、广告、弹出效果......有利于SEO优化
		之前版本通过div+id起别名方式【缺点：繁琐、定义起名、冗余】
		 -->
		 <aside>
			 <ul class="sidebar">
			 	<!-- 弹出框 -->
				<div class="out"></div>
				<li>手机</li>
			 	<li>电脑</li>
			 	<li>家具</li>
			 	<li>男装</li>
			 	<li>女装</li>
			 	<li>美妆</li>
			 	<li>房产</li>
			 	<li>母婴</li>
			 	<li>食品</li>
			 </ul>
		 </aside>
	</body>
</html>